<template>
	<!-- 如果页面跳转不行就去看看路由守卫里的判断 -->
	<div class="login-wrapper">
		<div class="login">
			<label>账号:</label
			><input type="text" class="userName inp" v-model="froms.userName" />
			<label>密码:</label
			><input type="password" class="passWord inp" v-model="froms.password" />
			<button class="loginStart" @click="login">登录</button>
		</div>
	</div>
</template>

<script>
import { loginRequest } from "@/api/user.js";
export default {
	name: "login",
	data() {
		return {
			froms: {
				userName: "admin",
				password: 123456,
			},
		};
	},
	mounted() {},
	methods: {
		//登录
		async login() {
			const { data } = await loginRequest(this.froms);
			console.log(data);
		},
	},
};
</script>

<style lang="less" scoped>
.login-wrapper {
	width: 1100px;
	height: 800px;
	background-color: cornflowerblue;
	margin: 0 auto;
	position: relative;
	.login {
		width: 500px;
		height: 300px;
		background-color: pink;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		padding: 10px;
		box-sizing: border-box;
		border-radius: 15px;
		box-shadow: 0 0 15px #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	label {
		font-size: 16px;
		font-weight: 600;
		margin-bottom: 10px;
	}
	.inp {
		width: 240px;
		height: 30px;
		border-radius: 10px;
		outline: none;
		border: none;
		font-size: 12px;
		color: sandybrown;
		margin-bottom: 30px;
	}
	.userName {
	}
	.loginStart {
		position: relative;
		font-size: 16px;
		background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
		background-size: 400%;
		width: 160px;
		height: 40px;
		color: #fff;
		text-align: center;
		line-height: 40px;
		text-transform: uppercase;
		border-radius: 50px;
		z-index: 0;
	}
	.loginStart::before {
		content: "";
		position: absolute;
		left: -5px;
		right: -5px;
		top: -5px;
		bottom: -5px;
		background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
		background-size: 400%;
		border-radius: 50px;
		filter: blur(20px);
		z-index: -1;
	}
	.loginStart:hover {
		animation: ambi 3s linear infinite;
	}
	.loginStart:hover::before {
		animation: ambi 3s linear infinite;
	}
	@keyframes ambi {
		100% {
			background-position: -400% 0;
		}
	}
}
</style>